<template>
  <div ref="selfRef" class="tp-scroll-box">
    <slot />
  </div>
</template>

<script lang="ts" setup>
const selfRef = shallowRef()

defineExpose({
  scrollTo: (option: { left?: number, top?: number }) => {
    let { left, top } = option
    if (typeof left === 'number') {
      if (left < 0) left = 0
      selfRef.value && (selfRef.value.scrollLeft = left)
    }
    if (typeof top === 'number') {
      if (top < 0) top = 0
      selfRef.value && (selfRef.value.scrollTop = top)
    }
  }
})
</script>

<style lang="less">
.tp-scroll-box {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(100, 100, 100, .1);
  }
}
</style>